<template>
    <section>

        <el-popover trigger="click" placement="right">
            <div>
                <nodeListShow :nodeList="currObj.flow[dataType].nodeList" :customerOrder='currObj' :dataType="dataType"></nodeListShow>
            </div>
            <div slot="reference">

                <el-row type="flex" class="row1">



                    <el-col>
                        <div style='height:5px'></div>
                        <el-progress :text-inside="true" :stroke-width="15" :status="getStatusStr(currObj.flow[dataType])" :percentage="getFlowJd(currObj.flow[dataType])"></el-progress>

                    </el-col>
                    <el-col class="col2">
                        <el-button size="small" class="btn1"><i class="fa fa-eye"></i></el-button>
                    </el-col>
                </el-row>


            </div>
        </el-popover>
        <table class="tb">
            <thead>
                <tr>
                    <th class='color'>颜色</th>
                    <th v-for='(sizeId,index) in currObj[dataType].sizeIdArray' :label="getSizeName(sizeId)">
                        <span v-text="getSizeName(sizeId)"></span>
                    </th>
                </tr>

            </thead>
            <tbody>
                <tr v-for="(item,index) in currObj[dataType].data">
                    <td class='color'>
                        <span v-text="item.colorName"></span>
                    </td>
                    <td v-for='(sizeId,index2) in currObj[dataType].sizeIdArray'>
                        <span v-text="item.sizeArray[index2].num"></span>
                    </td>

                </tr>
            </tbody>


        </table>
        <!--<el-table :data="currObj[dataType].data" class='tb' width="auto">
            <el-table-column label="颜色" width="80px">
                <template scope="scope">
                    <span v-text="scope.row.colorName"></span>

                </template>ƒ
            </el-table-column>


            <el-table-column :key='sizeId' v-for='(sizeId,index) in currObj[dataType].sizeIdArray' :label="getSizeName(sizeId)" width="80px">
                <template scope="scope">
                    <span v-text="scope.row.sizeArray[index].num"></span>

                </template>
            </el-table-column>

        </el-table>-->
        <div style="height: 10px"></div>
    </section>

</template>
<script src="./dataShow.js"></script>
<style>
    .tb thead tr th {
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
        min-width: 50px;
    }

    .tb thead tr th.color {

        text-align: left;
        padding: 0
    }

    .tb tbody tr td {
        text-align: center
    }

    .tb tbody tr td.color {

        text-align: left;
    }

    .row1 .col2 {
        width: 50px;
    }

    .row1 .col2 .btn1 {
        margin-left: 10px
    }
</style>